<template>
  <view class="filter-box">
    
    <uni-list :scrollY="true" class="scrollView" :height="scrollH+'px'">
      <uni-cell v-if="showStatus" class="status" :style="{height: statusH+'px'}">　</uni-cell>	
      <uni-cell class="shaixuan" v-if="showShaixuan">
        <text class="shaixuan-text">筛选</text>
      </uni-cell>
      <uni-cell>
        <uni-collapse>
          <template v-for="(item, index) in filter">
            <uni-collapse-item v-if="item.type === 'collapse' || item.type === 'list'" :title="item.name" :key="index" :open="item.type === 'collapse' ? item.open : true" :showRight="item.type === 'collapse'" :disabled="item.type !== 'collapse'">
              <view class="example-body" @click.stop="">
                <view class="tag-view" v-for="(val, idx) in item.childrens" :key="idx" @click="click(item, val)">
                  <uni-tag :text="val.name" :bgColor="val.active ? bgColor : '#f8f8f8'" :color="val.active ? color : '#333'" />
                  <view class="tag-close" v-if="val.active">
                    <uni-icons class="tag-close-icon" type="closeempty" color="#fff" size="10" />
                  </view>
                </view>
              </view>
            </uni-collapse-item>
            <view class="range" v-else-if="item.type === 'range'" :key="index" @click.stop="">
              <view class="title">
                <text class="title-text">{{ item.name }}</text>
              </view>
              <view class="cont">
                <input class="input" :value="datas[item.key] && datas[item.key].min" @input="input($event, item, 'min')" type="number" placeholder="最小值" placeholder-class="input-place" maxlength="9" />
                <view class="line"></view>
                <input class="input" :value="datas[item.key] && datas[item.key].max" @input="input($event, item, 'max')" type="number" placeholder="最大值" placeholder-class="input-place" maxlength="9" />
              </view>
              <view class="example-body" @click.stop=""> 
                <view class="tag-view" v-for="(val, idx) in item.childrens" :key="idx" @click="click(item, val)">
                  <uni-tag :text="val.name" :bgColor="val.active ? bgColor : '#f8f8f8'" :color="val.active ? color : ''" />
                  <view class="tag-close" v-if="val.active">
                    <uni-icons class="tag-close-icon" type="closeempty" color="#fff" size="10" />
                  </view>
                </view>
              </view>
            </view> 
          </template>
        </uni-collapse>
      </uni-cell>
    </uni-list>
    
    <view class="btn-box" :style="isDrawer ? '' : 'position: initial;'">
      <view class="btn-lists">
        <view class="btn" @click="result">
          <text class="btn-text">重置</text>
        </view>
        <view class="btn confirm" @click="confirm">
          <text class="btn-text">确认</text>
        </view>
      </view>
    </view>
  
  </view>
</template>

<script>
export default {
  inject: ['filters', 'bgColor', 'color', 'resultAll', 'showStatus', 'showShaixuan', 'isDrawer'],
  data() {
    return {
      datas: {},  // 选中的数据
      
      datasR: {},  // 重置时清除全部所用的数据（没有默认值）
      filterClone: [],  // 最初的筛选数据（用于重置）
      datasClone: {},  // 最初的数据（用于重置）
      
      scrollH: 1000,
      statusH: uni.getSystemInfoSync().statusBarHeight,
      
      filter: [],   // 筛选对象（内部）
    }
  },
  mounted() {
  	this.filter = JSON.parse(JSON.stringify(this.filters));
  	// #ifndef H5
  	this.scrollH = uni.getSystemInfoSync().windowHeight - uni.upx2px(88);
  	// #endif
  	// #ifdef H5
  	this.scrollH = window.innerHeight - uni.upx2px(88);
  	// #endif
    if(!this.isDrawer) {
      this.scrollH -= uni.upx2px(220);
    }
  	if(this.resutAll) {
  		this.filterClone = JSON.parse(JSON.stringify(this.filter));
  	}
  	this.filter.forEach(item => {
  		if(~Object.keys(item).indexOf('def')) {
  			this.datas[item.key] = item.def;
  			
  				let def = typeof item.def == 'object' ? item.def : [item.def];
  				item.childrens.forEach(val => {
  					if(~def.indexOf(val.id)) {
  						val.active = true;
  					}
  				})
  			
  		} else {
  			if(item.required) {
  				this.datas[item.key] = item.multiple ? [] : '';
  				if(this.resutAll) {
  					this.datasR[item.key] = item.multiple ? [] : '';
  				}
  			}
  		}
  	});
  	this.$forceUpdate();
  	if(this.resutAll) {
  		this.datasClone = JSON.parse(JSON.stringify(this.datasR));
  	} else {
  		this.filterClone = JSON.parse(JSON.stringify(this.filter));
  		this.datasClone = JSON.parse(JSON.stringify(this.datas));
  	}
  },
  methods: {
    // 计算结果
    result() {
    	for(let key in this.datas) {
    		if(this.datas[key].min || this.datas[key].max) {
    			this.datas[key].min = '';
    			this.datas[key].max = '';
    		}
    	}
    	this.filter = JSON.parse(JSON.stringify(this.filterClone));
    	this.$nextTick(function(){
    		this.datas = JSON.parse(JSON.stringify(this.datasClone));
    		this.$forceUpdate();
    	})
    },
    
    // 输入内容
    input(e, item, key) {
    	let value = parseFloat(e.target.value || e.detail.value) || '';
    	if(this.datas[item.key]) {
    		this.datas[item.key][key] = value;
    	} else {
    		this.datas[item.key] = {};
    		this.datas[item.key][key] = value;
    	}
    	item.childrens.forEach(item => {
    		item.active = false;
    	})
    	let [min, max] = [this.datas[item.key].min, this.datas[item.key].max];
    	if(!item.required && !min && !max) {
    		delete this.datas[item.key];
    	}
    	this.$forceUpdate()
    },
    
    // 点击选项
    click(item, val) {
    	let empty = false;
    	if(item.multiple) {
    		val.active = !val.active;
    		if(val.active) {
    			if(!this.datas[item.key]) this.datas[item.key] = [val.id];
    			else this.datas[item.key].push(val.id);
    		} else {
    			this.datas[item.key].splice(this.datas[item.key].indexOf(val.id), 1);
    		}
    		if(!this.datas[item.key].length) empty = true;
    	} else {
    		let v = val.active;
    		item.childrens.forEach(item => {
    			item.active = false;
    		})
    		val.active = !v;
    		if(item.type === 'range') {
    			let [min, max] = [val.range.min, val.range.max];
    			this.datas[item.key] = {
    				min,
    				max
    			}
    			if(!min && !max) empty = true;
    		} else {
    			this.datas[item.key] = val.active ? val.id : '';
    			if(!this.datas[item.key]) empty = true;
    		}
    	}
    	if(!item.required && empty) {
    		delete this.datas[item.key];
    	}
    	this.sort();
    	this.$emit('click', this.datas);
    	this.$nextTick(function(){
    		this.$forceUpdate();
    	})
    	
    },
    
    // 点击完成
    confirm() {
    	this.close();
    	this.sort();
    	this.$emit('filter', this.datas);
    },
    
    // 点击排序
    sort() {
    	for(let key in this.datas) {
    		let val = this.datas[key];
    		if(val.min || val.max) {
    			if(+val.max < +val.min) {
    				[val.max, val.min] = [val.min, val.max];
    			}
    		}
    	}
    	this.$forceUpdate();
    }
  }
}
</script>

<style lang="scss" scoped>
$width: 225px;
$height: 88rpx;
$btn-height: 50rpx;
$btn-width: 140rpx;
$btn-color: #666;
$btn-active-color: linear-gradient(0deg, #fd5959, #ef1885);

$input-width: 90px;
$input-height: 70rpx;
$cout-margin: 7px;
$line-margin: 6px;

.filter-box{
  background-color: #fff;
}

.status{
	width: $width;
}
.shaixuan{
	padding: 12px 12px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}
.shaixuan-text{
	font-size: 32rpx;
	color: #333;
  font-weight: 700;
}

.example-body {
	// width: $width;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
  flex: 1;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding-bottom: 14rpx;
}
.tag-view {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	margin: 5px 6px;
	justify-content: center;
	position: relative;
}
.tag-close{
	width: 34rpx;
	height: 22rpx;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #fd5959;
	border-top-left-radius: 20rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-left: 6rpx;
	padding-top: 4rpx;
}
.tag-close-icon{
	height: 22rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}


.range{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
}
.title{
	padding: 12px 12px;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	width: 100%;
	box-sizing: border-box;
	/* #endif */
	height: 48px;
	line-height: 24px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.title-text{
	flex: 1;
	font-size: 28rpx;
	/* #ifndef APP-NVUE */
	white-space: nowrap;
	color: inherit;
	/* #endif */
	/* #ifdef APP-NVUE */
	lines: 1;
	/* #endif */
	overflow: hidden;
	text-overflow: ellipsis;
}



.cont{
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	align-items: center;
	margin: 10rpx $cout-margin 20rpx;
}
.input{
	flex-direction: row;
	width: $input-width;
	height: $input-height;
	background-color: #f8f8f8;
	border-radius: $input-height;
	text-align: center;
	font-size: 28rpx;
	line-height: $input-height;
}
.line{
	width: 225px - ($input-width + $line-margin + $cout-margin) * 2;
	height: 1px;
	background-color: #ccc;
	margin: 0 $line-margin;
}
.input-place{
	text-align: center;
	font-size: 28rpx;
}


.scrollView{
	
}
.btn-box{
	height: $height;
	// width: $width;
	position: absolute;
	bottom: 0;
	right: 0;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.btn-lists{
	height: $btn-height;
	width: $btn-width * 2;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-radius: $btn-height;
	background-color: $btn-color;
	margin-right: 20rpx;
}
.btn{
	width: $btn-width;
	height: $btn-height;
  @include flex-row;
	justify-content: center;
	align-items: center;
}
.confirm{
	border-top-right-radius: $btn-height;
	border-bottom-right-radius: $btn-height;
	// background-color: $btn-active-color;
	background-image: $btn-active-color;
}
.btn-text{
	font-size: 26rpx;
	color: #fff;
}
</style>
